"use client";

import { Box, Text } from "@chakra-ui/react";

interface KeyItem {
  index: number;
  x: number;
  y: number;
  w: number;
  h: number;
  key?: {
    name: string;
  };
  code: number;
  name: string;
  row?: number;
  col?: number;
}

interface KeyCapProps {
  keyItem: KeyItem;
  isSelected: boolean;
  color: string;
  mode: string;
}

function KeyCap({ keyItem, isSelected, color, mode }: KeyCapProps) {
  return (
    <div className="keycap-content relative w-full h-full flex flex-col items-center justify-center">
      {/* 按键背景 */}
      <div 
        className={`keycap-bg absolute inset-0 rounded ${isSelected ? 'bg-blue-50' : 'bg-white'}`}
        style={{
          boxShadow: isSelected ? 'inset 0 0 0 1px #3182CE' : 'inset 0 0 0 1px #E2E8F0'
        }}
      />
      
      {/* 按键内容 */}
      <div className="relative z-10 flex flex-col items-center">
        {/* 按键名称 */}
        <Text 
          className="key-name"
          fontSize="13px" 
          fontWeight="bold"
          color={isSelected ? "blue.600" : "gray.800"}
          textAlign="center"
          lineHeight="1.2"
          mb="1px"
        >
          {keyItem.key?.name || keyItem.name}
        </Text>
        
        {/* 按键代码 */}
        <Text
          className="key-code"
          fontSize="10px"
          color="gray.500"
          fontWeight="normal"
        >
          {keyItem.code}
        </Text>
        
        {/* 矩阵位置 */}
        {keyItem.row !== undefined && keyItem.col !== undefined && (
          <Text
            className="key-position"
            fontSize="9px"
            color="gray.400"
            lineHeight="1"
          >
            {keyItem.row},{keyItem.col}
          </Text>
        )}
      </div>
    </div>
  );
}

export default KeyCap; 